import { defineComponent, reactive, onMounted } from 'vue';
import event from '../tools/event';
import '../style/toast.css';

export default defineComponent({
  name: 'My-Toast',
  setup() {
    const state = reactive({
      showWrap: true,
      showContent: false,
      text: '文本',
    });

    onMounted(() => {
      event.on('show-toast', ({ text }) => {
        state.text = text;
        state.showWrap = true;
        state.showContent = true;
        setTimeout(() => {
          state.showContent = false;
          setTimeout(() => {
            state.showWrap = false;
          }, 0);
        }, 1000 * 3);
      });
    });

    return () => {
      const { text, showContent } = state;
      const cls = 'wrap flexBox alItSt';
      return (
        <div v-show={state.showWrap} class={showContent ? `${cls} fadein` : `${cls} fadeout`}>
          <span>{text}</span>
        </div>
      );
    };
  },
});
